<template>
    <div class="totalContent">
    
        <div class="top" style="display: flex;
        justify-content: space-between; align-items: center;
        ">
            <div class="topLeft" style="height: 100%; padding:0 10px 0 10px; 
            display: flex;
            align-items: center;">
                <el-image  style="height:100%" src="../../../public/images/Logo/FB_text.jpg"></el-image>
                <span>|</span>
                <span>未来蜂账号</span>
               
            </div>
            <div class="topRight" style="height:100%;
            width: 30%;
            display: flex;
            align-items: center;">
                {{ user.nickName }}
                <span>|</span>
                <a href="/personalCenter" ><span>退出</span></a> 
            </div>
        </div>  
    
    <el-card shadow="always" style="margin-top:40px;"> 
        <div class="content" style="display: flex;">
            <div class="contentLeft">
              
                <div style="display: flex;
                flex-direction: column;
                height: 100%;">
                    <div style="display: flex;
                flex-direction: column; flex: 3;">
                        <div class="s1">
                            <el-image style="width: 72px;height:72px;" :src="Path.imgPath + user.icon"></el-image>
                        </div>
                        <div class="s1">
                            {{ user.nickName}}
                        </div>
                        <div class="s1">
                            <div style="display: flex;">
                                <span>
                                    账号 :
                                </span>
                                <span style="padding-left: 10px;">
                                    {{ user.email }}
                                </span>
                            </div>
                        </div> 
                    </div>
                  
                    
                    <div style="flex:7;">
                        <ul id="buttonList" style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0; margin: 0; list-style: none;">
                        <li style="width: 100%; flex: 1;">
                            <el-button
                            @click="goToAccount"
                            :class="{ 'active-button': isActive, 'inactive-button': !isActive }" 
                            style="width: 100%; height: 100%;">
                                账户余额
                            </el-button></li>
                        <li style="width: 100%; flex: 1;">
                             <el-button
                           :class="{ 'active-button': !isActive, 'inactive-button': isActive }" 
                            @click="goToRecharge"
                            style="width: 100%; height: 100%;">
                                账单明细
                            </el-button></li>
                        </ul>
                    </div>
                    
                </div>
                
            </div>
            <div class="contentRight" style="
            ">  
                <div>
                    <router-view></router-view>
                </div>
            </div>
        </div>    
    </el-card>  
    </div>
    
    <div class="bottom">
            <footer0></footer0>
        </div> 
    
</template>
<script setup>
import {ref } from 'vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'
import router from '@/router';
import { Path } from '@/constant';
import { get } from '@/plugins/axios';
import { useUserStore } from '@/stores/pinia'
const userStore = useUserStore()
const user = ref({})
userStore.setLoginUser()
user.value = userStore.loginUser
const goToAccount = () => {  
    toggleActive()
    router.push({ name: 'recharge' });
};  

const goToRecharge = () => {  
    toggleActive()
    router.push({ name: 'account' });
}; 


const isActive = ref(false);   
function toggleActive() {  
  isActive.value = !isActive.value;  
}  
</script>
<style scoped lang="scss">
*{
    border:0px;
    padding:0px;
    box-sizing:border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}



/* 定义点击时的背景色 */  
.active-button {  
  background-color: #409EFF !important; /* Element UI 蓝色主题的按钮背景色，根据需要调整 */  
  transition: background-color 0.3s ease; /* 平滑过渡效果 */  
}  
  
/* 假设你还需要一个初始或未激活状态的样式 */  
.inactive-button {  
  background-color: #F5F7FA !important; /* Element UI 默认按钮背景色，根据需要调整 */  
  transition: background-color 0.3s ease; /* 平滑过渡效果 */  
}

ul{
    list-style: none;

    li{

    }
}
.totalContent{
    width: 80%;
    height:100%;
    margin:0 10% 0 10%;
    .top{
    height:48px;

        span{
            margin-left:20px;
        }
    }
    .content{
        height:620px;
        width: 100%;
        padding-top:50px;
   /*      border: 0.667px black solid; */
        .contentLeft{
            height: 500px;
            width: 20%;
            /* border:0.667px black solid; */
            .s1{
                width:100%;
                height: auto;                
                display: flex;
                justify-content: center;
                margin-top:10px;
            }
        }
        .contentRight{
            height: 100%;
            width: 60%;
            margin-left: 80px;
          /*   border:0.667px black solid; */
        }
        
    }
   

}
::v-deep .el-input__wrapper {
background-color: #f2f4f7;
border-radius: 5px;
border: 1px solid #dcdfe6; // 添加默认边框
border-radius: 8px;
}
::v-deep .el-input__wrapper:hover {
background-color: #ffffff;
border-color: #409eff; 
transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}
.bottom{
        height:45px;
        width: 100%;
        position: absolute;
        bottom: 0;
        margin-left:-10px;
    }
	.money{
		width: 100px;
		height: auto;
		margin-left: 42%;
		margin-top: 3%;
	}
	
</style>